<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{margin: 0;padding: 0}
        ul li{list-style-type: none}
        .nav ul{
            display: flex;
            justify-content: space-around;
            padding: 0;
        }
        .nav ul li{
            width: 100%;
            height: 50px;
            border: 1px solid red;
            text-align: center;
        }
        .active{
            background-color: #f0f;
        }
        .nav ul a{
            text-decoration: none;
            font-size: 16px;
            display: block;
            line-height: 50px;
        }
        .wrap{margin: 100px auto;width: 600px;height: 400px;
        }
        .main div{width: 600px;height: 350px;
            background-color: #000;
            color: #fff;
            display: none;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="nav" id="nav">
        <ul>
            <li class="active"><a href="#">11111</a></li>
            <li><a href="#">22222</a></li>
            <li><a href="#">33333</a></li>
        </ul>
    </div>
    <div class="main" id="main">
        <div style="display: block;"><h1>111111</h1></div>
        <div><h1>2222222</h1></div>
        <div><h1>333333</h1></div>
    </div>
</div>
<script>
  let oNavs = document.querySelectorAll('#nav ul li');
  let oMains = document.querySelectorAll('#main div');


  /***
   功能：选项卡实现
   参数：1. tags 选项卡标签
   2. d_blocks 选项卡内容区域
   3. ev 鼠标事件
   局限：更改的是tags的 class
   更改的是d_blocks 的 行间样式
   */
  function selectCard(tags, d_blocks, ev){
    let len = tags.length;
    for(let i = 0; i < len; i++){
      tags[i].index = i;
      tags[i].addEventListener(ev, function(){
        for(let i = 0; i < len; i++){
          tags[i].className = '';
          d_blocks[i].style.display = '';
        }
        this.className = 'active';
        d_blocks[this.index].style.display = 'block';
      })
    }
  }
  selectCard(oNavs, oMains, 'click')

  // for(let i = 0,len = oNavs.length; i < len; i++){

  // 	oNavs[i].index = i;
  // 错误事例：oMains[i].index = i;
  /*
   解释：为每个oMains【div】手动添加index属性
   oMains[0].index ==> 0
   oMains[1].index ==> 1
   oMains[2].index ==> 2
   */
  // 	oNavs[i].addEventListener('click', function(){
  // 		for(let i = 0; i < len; i++){

  // 			oNavs[i].className = '';
  // 			oMains[i].style.display = 'none';

  // 		}
  // 		this.className = 'active'; // 为当前的li加上li
  // 		oMains[this.index].style.display = 'block' // 为当前div【由当前li决定】添加属性display
  /*
   在这里是拿不到每个oMains【div】的index 属性的
   原因：这里的this 指代的 oNavs
   所以 this.index ==> oNavs.index【可你没定义】
   SO，报错【style is not defined】
   */
  // 	})
  // }
</script>
</body>
</html>